<template>
    <div>
        <a-row :gutter="24">
            <a-col :span="16">
                <div class="warpper-box">
                    <a-tabs :defaultActiveKey="activeCode" :key="keys" type="editable-card" :hideAdd="true" @change="callbackTab">
                        <a-icon type="plus-circle" v-action:menuAddBtn :style="{fontSize: '18px',position:'absolute',right:0,top:'10px'}" @click="()=> addUserType(true)" />
                        <a-tab-pane v-for="pane in userTypeData" :key="pane.code" forceRender :closable="false">
                            <span slot="tab">
                                <span style="margin-right:10px;">{{pane.name}}</span>
                                <a-icon type="form" v-action:menuEditBtn @click="()=> addUserType(pane)" />
                                <a-popconfirm
                                    title="确认删除?"
                                    ok-text="确认"
                                    cancel-text="取消"
                                    @confirm="remove(pane.id)" >
                                   <a-icon v-action:menuDelBtn type="delete" />
                                </a-popconfirm>
                            </span>
                        </a-tab-pane>
                    </a-tabs>
                    <a-card :bordered="true" title="权限菜单" :style="{ height: '100%' }">
                        <a-tree
                        :defaultExpandAll="true"
                         :replaceFields="{title:'menuName'}"
                        default-expand-all
                        :tree-data="treeData">
                        </a-tree>
                        <a-empty v-show="treeData.length ===0"/>
                    </a-card>
                </div>
            </a-col>
            <a-col :span="8">
                <div class="warpper-box">
                    <a-card :bordered="true" title="账户类型名称" :style="{ height: '100%' }">
                       <a-list size="large">
                            <a-list-item :key="index" v-for="(item, index) in userTypeData">
                                <a-list-item-meta>
                                    <label slot="title">{{ item.name }}</label>
                                </a-list-item-meta>
                                <div slot="actions">
                                    <a-button v-action:menuPermissionBtn @click="addTree(item)" type="link">分配权限</a-button>
                                </div>
                            </a-list-item>
                        </a-list>
                    </a-card>
                    <create-tree ref="createTree" @ok="treeSubmit" />
                </div>
            </a-col>
        </a-row>
        <a-modal :title="title" :width="640" :visible="visible" @ok="handleOk" @cancel="visible=false">
            <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
        </a-modal>
    </div>
</template>

<script>
import { 
    sysUserTypeList, 
    sysAddUserType,
    sysEditUserType,
    sysDelUserType,
    sysUserTypeCodeTree,
 } from '@/api/manage/userType'
import CreateTree from './modules/createTree'
import { generateMixed } from '@/utils/util'
import {FORM_CHILD_MENU,OPTION_BLOCK} from './modules/form'
export default {
  name: 'childMenu',
  components: {
    CreateTree
  },
  data () {
    return {
        keys:0,
        form:{
            fApi:{},
            rule:[],
            option:OPTION_BLOCK
        },
        visible:false,
        title:'新增',
        id:'',
        activeCode:'',
        treeData:[],
        userTypeData:[]
    }
  },
  mounted () {
    this.initUserTypeList(true);
  },
  methods: {
    async initUserTypeList(falg){
        const {code,data} = await sysUserTypeList();
        if(code === '1'){
            this.userTypeData = data;
            if(falg){
                this.keys++;
                this.activeCode = data[0].code;
            }
            this.getUserTypeTree();
        }
    },
    async getUserTypeTree(){
       const {code,data} = await sysUserTypeCodeTree(this.activeCode);
       if(code === '1'){
           this.treeData = data;
       }
    },
    addUserType(rows){
        this.form.rule = FORM_CHILD_MENU;
        this.$nextTick(()=>{
           this.form.fApi.setValue({
                name:''
            })
        });
        if(rows === true){
            this.id = "";
            this.title="新增";
            this.$nextTick(()=>{
                this.form.fApi.setValue({
                    code:generateMixed(30)
                })
            })
        }else{
            this.id = rows.id;
            this.title="编辑";
            this.$nextTick(()=>{
                this.form.fApi.setValue({
                    name:rows.name,
                    code:rows.code
                })
            })
        }
        this.visible = true;
    },
    async remove(id){
       const {code} = await sysDelUserType(id);
       if(code === '1'){
           this.$message.success('操作成功');
           this.initUserTypeList(true);
       }
    },
    callbackTab(tabKsy){
        const _obj = this.userTypeData.find(v=>v.code===tabKsy);
        this.activeCode = _obj.code
        this.getUserTypeTree();
    },
    handleOk () {
        this.form.fApi.submit(async (formData, $f) => {
            try {
                if(this.id){
                    formData.id = this.id;
                }
                const {code} = this.id ? await sysEditUserType(formData) : await sysAddUserType(formData);
                if(code === '1'){
                    this.visible = false;
                    this.initUserTypeList(false);
                }
            } catch (error) {
                this.$message.info(JSON.stringify(error));
            }
        })
    },
    addTree(item){
        this.keys++;
        this.activeCode = item.code;
        this.initUserTypeList(false);
        this.$refs.createTree.add(item,'menuId','typeId')
    },
    treeSubmit(){
        this.initUserTypeList(false);
    }
  }
}
</script>


